---
title: Using with Vue
description: Learn how to easily integrate @embedpdf/engines into your Vue applications using the provided composable.
searchable: true
---

import { Callout } from '@/components/callout'

# Using with Vue

While `@embedpdf/engines` is a framework-agnostic library, it includes a dedicated Vue Composable, `usePdfiumEngine`, to simplify integration and manage the engine's lifecycle within your components.

This is the recommended way to get started with EmbedPDF in a Vue 3 application.

## Installation

The `usePdfiumEngine` composable is included directly within the main package.

```sh npm2yarn
npm install @embedpdf/engines
````

## The `usePdfiumEngine` Composable

This function handles the creation of the `WebWorkerEngine`, manages its loading and error states as reactive refs, and automatically cleans up the engine when the component is unmounted.

Here's a basic example using the Composition API with `<script setup>`:

```vue filename="PDFProcessor.vue"
<script setup>
import { ref, watchEffect } from 'vue';
import { usePdfiumEngine } from '@embedpdf/engines/vue';

// The composable returns reactive refs
const { engine, isLoading, error } = usePdfiumEngine();
const isReady = ref(false);

watchEffect(() => {
  // The engine ref needs to be initialized once it's available.
  if (engine.value && !isReady.value) {
    engine.value.initialize().toPromise().then(() => {
      isReady.value = true;
    });
  }
});
</script>

<template>
  <div v-if="error">
    Error: {{ error.message }}
  </div>
  <div v-else-if="isLoading || !isReady">
    Initializing PDF Engine...
  </div>
  <div v-else>
    <p>PDF Engine is ready to use!</p>
    <!-- You can now pass the engine ref to other components -->
  </div>
</template>
```

{/*
<Callout>
**Learn More**
For in-depth documentation on `usePdfiumEngine`, interactive examples, and other Vue-specific utilities, please see the full **[@embedpdf/vue package documentation](/docs/vue/introduction)**.
</Callout>
*/}